import React, { FC, useState, useRef, useContext } from 'react';
import { View, Text } from '@tarojs/components';
import { styled } from 'linaria/react';
import { useClassName } from '@/utils/index';
import { Tabs, Swiper } from 'antd-mobile';
import { useOptionsRender } from './MyOrderContentOption';
import { SwiperRef } from 'antd-mobile/es/components/swiper';
import { HomeContext } from '@/pages/components/RootPageComponent/RootPageComponentContext';
export interface IProps extends ICompProps {}
MyOrderContent.defaultProps = {} as Partial<IProps>;
function MyOrderContent(props: IProps) {
    const { className, style } = props;
    const localClassName = useClassName('MyOrderContent', className);
    const swiperRef = useRef<SwiperRef>(null);
    const [activeIndex, setActiveIndex] = useState(0);
    const tabItems = [
        { key: 'all', title: '全部订单', componentval: 'AllOrderList'},
        { key: 'willpay', title: '待付款', componentval:'WillPayList' },
        { key: 'payed', title: '已付款', componentval: 'PayedList'},
        { key: 'canceled', title: '已取消', componentval: 'CancleList'},
    ];
    /**计算滚动区域高度 */
    const { rootLayoutState } = useContext(HomeContext);
    const {bodyScrollHeight,footHeight,headNavHeight} = rootLayoutState;
    const Height = (bodyScrollHeight-38-28-40-headNavHeight) + 'px';
    return (
        <RootAtTabs className={localClassName} style={{marginTop:'28px'}}>
            <Tabs
                className="tabs"
                activeLineMode="fixed"
                style={{
                    '--fixed-active-line-width': '20px',
                    '--active-line-color': '#FF8828',
                    '--active-line-height': '5px',
                    '--active-title-color': '#333333',
                    '--title-font-size': '14px',
                    height: '38px'
                }}
                activeKey={tabItems[activeIndex].key}
                onChange={(key) => {
                    const index = tabItems.findIndex((item) => item.key === key);
                    setActiveIndex(index);
                    swiperRef.current?.swipeTo(index);
                }}>
                {tabItems.map((item) => (
                    <Tabs.Tab title={item.title} key={item.key} />
                ))}
            </Tabs>
            <Swiper
                style={{ height: Height }}
                className="swipercontent"
                direction="horizontal"
                loop
                indicator={() => null}
                ref={swiperRef}
                defaultIndex={activeIndex}
                onIndexChange={(index) => {
                    setActiveIndex(index);
                }}>
                {tabItems.map((item) => (
                    <Swiper.Item key={item.key}>
                        </Swiper.Item>
                ))}
            </Swiper>
        </RootAtTabs>
    );
}
export default React.memo(MyOrderContent as FC<IProps>);
const RootAtTabs = styled(View)`
    &.MyOrderContent {
        /* margin-top: 48px; */
        .tabs {
            color: #808a9d;
            z-index: 999;
        }
        .swipercontent {
            overflow-x: hidden;
            overflow-y: scroll;
        }
    }
`;
